<template>
  <view class="container">
    <view class="score-board">
      <text>Time: {{ timeLeft }}</text>
      <text>Score: {{ score }}</text>
    </view>
   <view class="direction-word" v-if="gameStarted" :style="{transform: actualDirectionStyle}">{{ directionWord }}</view>
    <!-- <view class="actual-direction" :style="{transform: actualDirectionStyle}" v-if="gameStarted">↑</view> -->
    <view class="buttons">
      <button class="button start-button" @click="submitAnswer('YES')" v-if="gameStarted">YES</button>
      <button class="button reset-button" @click="submitAnswer('NO')" v-if="gameStarted">NO</button>
    </view>
    <view class="buttons">
      <button class="button start-button" @click="startGame" v-if="!gameStarted">Start Game</button>
      <button class="button reset-button" @click="resetGame" v-if="gameStarted">Reset Game</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      score: 0,
      timeLeft: 60,
	  directions: ['上', '下', '左','右'],
      directionWord: '',
      actualDirection: '',
      gameStarted: false,
      timer: null
    };
  },
  computed: {
    actualDirectionStyle() {
      const rotations = {
        '上': 'rotate(0deg)',
        '右': 'rotate(90deg)',
        '下': 'rotate(180deg)',
        '左': 'rotate(270deg)',
      };
      return rotations[this.actualDirection];
    }
  },
  methods: {
    startGame() {
     
      this.resetGame(); // Reset game before starting
	  this.gameStarted = true;
      this.nextDirection();
      this.timer = setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft--;
        } else {
          this.endGame();
        }
      }, 1000);
    },
    resetGame() {
      this.score = 0;
      this.timeLeft = 60;
      this.gameStarted = false;
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    nextDirection() {
      const directionIndex = Math.floor(Math.random() * this.directions.length);
      this.directionWord = this.directions[directionIndex];
      const actualIndex = Math.floor(Math.random() * this.directions.length);
      this.actualDirection = this.directions[actualIndex];
    },
    submitAnswer(answer) {
      const correct = (this.directionWord === this.actualDirection);
      if ((answer === 'YES' && correct) || (answer === 'NO' && !correct)) {
        this.score++;
      } else {
        this.score--;
      }
      this.nextDirection();
    },
    endGame() {
      this.gameStarted = false;
      clearInterval(this.timer);
      uni.showModal({
        title: 'Game Over',
        content: `Your final score is: ${this.score}`,
        showCancel: false,
        success: () => this.resetGame()
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.score-board {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
}

.score-board text {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 18px;
  font-weight: bold;
}

.direction-word {
  font-size: 50px; /* Adjusted for better visibility */
  font-weight: bold;
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  user-select: none;
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}
.actual-direction {
  font-size: 50px; /* 根据需要调整大小 */
  margin: 10px;
  display: inline-block; /* 保持元素可旋转 */
  transition: transform 0.3s ease-in-out; /* 平滑旋转效果 */
}

.buttons {
  display: flex;
  justify-content: center;
  width: 100%;
}

.button {
  border: none;
  padding: 15px 30px;
  margin: 10px;
  border-radius: 25px;
  color: white;
  font-size: 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s, transform 0.1s;
  user-select: none;
}

.button:hover {
  cursor: pointer;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.start-button {
  background-color: #4CAF50;
}

.reset-button {
  background-color: #f44336;
}

@media screen and (max-width: 480px) {
  .button {
    padding: 10px 20px;
    font-size: 16px;
  }
  .direction-word {
    font-size: 30px; /* Adjusted for smaller screens */
  }
}
</style>
